<template>
  <div class="home">
    <el-container>
      <el-header style="height: 112px">
        <div class="search">
          <header-bar></header-bar>
          <div class="bottom">
            <el-button type="primary" @click="creatShow = true"
            >+{{$t('home.NewCard')}}
            </el-button>
            <div class="optionContaier">
              <div class="typeSelect" v-if="options.length>0">
                <el-select v-model="cardFenlei"
                           @change="cardSearch"
                           :placeholder="$t('home.PleaseSelect')">
                  <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div class="searchInput">
                <el-input
                    :placeholder="$t('home.search')"
                    suffix-icon="el-icon-search"
                    v-model="search">
                </el-input>
                <!--              <input type="text" placeholder="搜索" v-model="search" />-->
              </div>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <ul>
            <li>
              <img src="../assets/img/jurassic_engineering.png" alt="" />
              <router-link to="/">{{ $t('home.nav') }}</router-link>
            </li>
          </ul>
          <!--          <router-link to="/about">素材库</router-link>-->
        </el-aside>
        <el-main>
          <div
              class="list"
              ref="list"
              v-infinite-scroll="vtrsproject"
              style="overflow-y:auto"
          >
            <div
                class="item"
                v-for="(item, index) in vtrsprojectList"
                :key="item.id"
            >
              <div
                  class="pic"
                  @mouseleave="item.coverShow = false"
                  @mouseenter="item.coverShow = true"
              >
                <img class="product" :src="item.image" alt="" />
                <div
                    class="cover"
                    v-show="item.coverShow && item.status === 'normal'"
                >
                  <div class="prew" @click="prewHadler(item)">
                    <img src="../assets/img/preview.png" alt="" /><span
                  >{{ $t('home.prev') }}</span
                  >
                  </div>
                  <div
                      class="edit"
                      @click="bianjiHadler(item)"
                      v-if="item.status !== 'hidden'"
                  >
                    <img src="../assets/img/bianji.png" alt="" /><span
                  >{{ $t('home.edit') }}</span
                  >
                  </div>
                </div>

                <div class="status">
                  <img
                      src="../assets/img/shenhe.png"
                      alt=""
                      v-if="item.status === 'hidden'"
                  />
                  <img
                      src="../assets/img/shenheerr.png"
                      alt=""
                      v-else-if="item.status === 'rejected'"
                  />
                  <img src="../assets/img/fabu.png" alt="" v-else />
                </div>
              </div>
              <div class="control">
                <p>{{ item.title }}</p>
                <div
                    class="iconContainer"
                    @mouseleave="oprateHide(index)"
                    @mouseenter="oprate(index)"
                >
                  <div class="more">
                    <img src="../assets/img/gengduo.png" alt="" />
                  </div>
                  <div class="operate" v-show="item.show">
                    <ul>
                      <!--                      <li @click="yulanHadler(item)">
                                              <img src="../assets/img/yulan.png" alt="" /><span
                                            >预览</span
                                            >
                                            </li>-->
                      <li
                          @click="shareHadler(item)"
                          v-if="item.status === 'normal'"
                      >
                        <img src="../assets/img/fenxiang.png" alt="" />
                        <span>{{ $t('home.share') }}</span>
                      </li>
                      <li @click="deleteHadler(item, index)">
                        <img src="../assets/img/shanchu.png" alt="" /><span
                      >{{ $t('home.delete') }}</span
                      >
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog :title="$t('home.SelectType')"
               custom-class="selectType"
               width="400px"
               :visible.sync="creatShow">
      <div>
        <div class="selectContainer">
          <p>{{$t('home.classify')}}：</p>
          <el-select v-model="creatFenlei" :placeholder="$t('home.PleaseSelect')">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" @click="addFenlei" style="margin-left:20px;">{{$t('home.AddCategory')}}</el-button>
        </div>
        <div class="typeSelect" v-if="types">
            <div class="item">
              <el-upload
                  class="upload-cover"
                  list-type="picture"
                  action="https://course.acktechnologies.com.cn/api/card/upload"
                  :on-progress="circleProgress"
                  :on-success="articleUploadOk"
                  :on-error="uploadErro"
                  :on-change="circleChange"
                  :show-file-list="false"
                  :data="uploaddata"
              >
                <div class="icon"><img :src="types.normal.thumb" alt=""></div>
                <div class="text">
                  <h5>{{types.normal.name}}</h5>
                  <p>{{types.normal.description}}</p>
                </div>
              </el-upload>
            </div>
            <div class="item">
              <el-upload
                  class="upload-cover"
                  list-type="picture"
                  action="https://course.acktechnologies.com.cn/api/card/upload"
                  :on-progress="circleProgress"
                  :on-success="videoUploadOk"
                  :on-error="uploadErro"
                  :on-change="circleChange"
                  :show-file-list="false"
                  :data="uploaddata"
              >
                <div class="icon"><img :src="types.video.thumb" alt=""></div>
                <div class="text">
                  <h5>{{types.video.name}}</h5>
                  <p>{{types.video.description}}</p>
                </div>
              </el-upload>
            </div>
            <div class="item">
              <el-upload
                  class="upload-cover"
                  list-type="picture"
                  action="https://course.acktechnologies.com.cn/api/card/upload"
                  :on-progress="circleProgress"
                  :on-success="audioUploadOk"
                  :on-error="uploadErro"
                  :on-change="circleChange"
                  :show-file-list="false"
                  :data="uploaddata"
              >
                <div class="icon"><img :src="types.audio.thumb" alt=""></div>
                <div class="text">
                  <h5>{{types.audio.name}}</h5>
                  <p>{{types.audio.description}}</p>
                </div>
              </el-upload>
            </div>
            <div class="item" @click="jumpText">
<!--              <el-upload
                  class="upload-cover"
                  list-type="picture"
                  action="https://course.acktechnologies.com.cn/api/card/upload"
                  :on-progress="circleProgress"
                  :on-success="textUploadOk"
                  :on-error="uploadErro"
                  :on-change="circleChange"
                  :show-file-list="false"
                  :data="uploaddata"
              >
              </el-upload>-->
              <div class="icon"><img :src="types.text.thumb" alt=""></div>
              <div class="text">
                <h5>{{types.text.name}}</h5>
                <p>{{types.text.description}}</p>
              </div>
            </div>
        </div>

      </div>
    </el-dialog>
    <div class="progressConatiner" v-show="uploadFlag">
      <el-progress type="circle" :percentage="progressNum"></el-progress>
    </div>
    <!--素材-->
    <div class="materialBox" v-show="materialShow">
      <div class="close" @click="materialShow = false">
        <img src="../assets/img/guanbix.png" alt="" />
      </div>
      <p class="title">{{ $t('home.SelectTemplate') }}</p>
      <el-radio-group v-model="checkboxValue">
        <div
            class="infinite-list"
            v-infinite-scroll="load"
            style="overflow:auto"
        >
          <div
              v-for="item in materialList"
              class="infinite-list-item"
              :key="item.id"
          >
            <el-radio :label="item.id"></el-radio>
            <img :src="item.thumb" alt="" />
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </el-radio-group>
      <div class="bottomContro">
        <el-button type="primary" @click="importProject">{{ $t('home.confirm') }}</el-button>
      </div>
    </div>
    <el-dialog :title="$t('home.ShareCode')" width="483px" :visible.sync="dialogVisible">
      <div class="share">
        <img :src="share.share_url" alt="" />
      </div>
      <p class="shareName">{{ share.name }}</p>
      <div class="copyBox">
        <div class="biaoti">{{$t('home.LinkAddress')}}：</div>
        <div class="linkContainer">{{ share.address }}</div>
        <div class="copy" @click="copyUrl(share.address)">{{$t('home.copy')}}</div>
      </div>
    </el-dialog>
    <el-dialog
        :title="`vtrs${$t('home.title')}2.0`"
        custom-class="yulan"
        :fullscreen="true"
        :visible.sync="yulanVisible"
    >
      <div id="left">
        <div class="picLIst" v-for="item in yulanObj.attachment" :key="item.id">
          <img :src="item.url" alt="" />
        </div>
      </div>
      <div id="right">
        <div class="save">
          <p>{{ $t('home.SceneInformation') }}</p>
          <div class="item">
            <div class="title">{{ $t('home.title1') }}</div>
            <el-input v-model="title" placeholder=""></el-input>
          </div>
          <div class="item">
            <div class="title">{{ $t('home.describe') }}</div>
            <el-input
                type="textarea"
                placeholder=""
                v-model="desc"
                maxlength="300"
                show-word-limit
                rows="5"
            >
            </el-input>
          </div>
          <div class="item">
            <div class="title">{{ $t('home.cover') }}</div>

            <el-upload
                class="upload-cover"
                list-type="picture-card"
                action="https://course.acktechnologies.com.cn/api/vtrsproject/thumb"
                :on-progress="progress"
                :on-success="coverUploadOk"
                :on-error="uploadErro"
                :on-change="fileChange"
                :show-file-list="false"
                :data="coverdata"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div class="coverImg" v-show="coverImg">
                <img
                    class="el-upload-list__item-thumbnail"
                    :src="coverImg"
                    alt=""
                />
                <div class="close" @click.stop="remove">
                  <img src="../assets/img/close.png" alt="" />
                </div>
              </div>
            </el-upload>
          </div>
          <div class="saveBtn" @click="update">
            {{ $t('home.save') }}
          </div>
        </div>
      </div>
      <div id="center">
        <div class="yulancontent">
          <iframe :src="yulanObj.vr_address" frameborder="0"></iframe>
        </div>
      </div>
      <div class="txt" @click="btnPrev">
        {{ $t('home.prev') }}
      </div>
    </el-dialog>
    <el-dialog
        :title="$t('home.prev')"
        width="414px"
        :visible.sync="prewVisible"
        custom-class="prew"
        :modal="true"
    >
        <p class="title">{{prevObj.title}}</p>
       <div class="media" v-if="prevObj">
           <div v-if="prevObj.kapian.type==='normal'">
               <img :src="prevObj.kapian.article_image" alt="">
           </div>
           <div  v-else-if="prevObj.kapian.type==='video'">
               <video :src="prevObj.kapian.video" controls="controls">
                   您的浏览器不支持 video 标签。
               </video>
           </div>
           <div v-else>
               <audio :src="prevObj.kapian.audio" controls="controls">
                   Your browser does not support the audio element.
               </audio>
           </div>
       </div>
        <div v-html="prevObj.kapian.content" v-if="prevObj.kapian&&prevObj.kapian.content"></div>
    </el-dialog>
  </div>
</template>
<script>
import { get, post } from "../assets/js/http";
import headerBar from "@/components/header";
export default {
  name: "Home",
  data() {
    return {
      title: "",
      desc: "",
      search: "",
      creatShow: false, //创建工程显示、隐藏
      materialShow: false, //素材显示、隐藏
      name: "", //工程中文名称
      enName: "", //工程英文名称
      sucai: "", //素材搜索值
      materialList: [], //素材列表
      materialPage: 1,
      vtrsprojectPage: 1,
      vtrsprojectList: [],
      radioVal: false,
      share: "", //分享链接
      dialogVisible: false,
      data: {
        token: this.$cookies.get("vtrstoken")
      },
      coverdata: {
        token: this.$cookies.get("vtrstoken")
      },
      uploaddata:{
        token: this.$cookies.get("vtrstoken")
      },
      fileFlag: false,
      progressVal: 0,
      checkboxValue: "", //选中的值
      gongchengId: "",
      imgid: "",
      yulanVisible: false, //编辑显示、隐藏
      yulanObj: "",
      loginout: false,
      prewGongchengId: "",
      prewVisible: false,
      prewUrl: "", //预览链接
      coverImg: "",
      avatar: this.$cookies.get("avatar"),
      nickname: this.$cookies.get("nickname"),
      fileList: [], //全景素材
      options:{},  //选择分类
      category:"", //名称
      cardFenlei:"", //筛选的分类
      creatFenlei:"",  //新建时的分类
      types:"",  //类型列表
      prevObj:"",  //预览
      type:"",
      cid:"",
      progressNum:0,
      uploadFlag:false, //文件上传标识
      articleImg:"", //上传的图文封面图
    };
  },
  components:{
    headerBar
  },
  created() {
    this.getOption();
    this.getTypes();
    },
  mounted() {
    // 绑定enter事件
    this.enterKeyup();
  },
  destroyed() {
    // 销毁enter事件
    this.enterKeyupDestroyed();
  },  
  methods: {
    enterKey(event) {
      const code = event.keyCode
          ? event.keyCode
          : event.which
              ? event.which
              : event.charCode;
      if (code == 13) {
        this.pagesize = 0;
        this.vtrsproject();
      }
    },
    enterKeyupDestroyed() {
      document.removeEventListener("keyup", this.enterKey);
    },
    enterKeyup() {
      document.addEventListener("keyup", this.enterKey);
    },
      cardSearch(value){
        this.cid = value;
        this.vtrsprojectPage = 1;
        console.log(this.vtrsprojectPage)
        this.vtrsproject();
      },
      editor(id){
          this.type = id;
          this.creatShow = false;
          this.materialShow = true;
          this.load();
    },
    addFenlei(){
        this.$prompt(this.$t('home.msg10'), this.$t('home.msg13'), {
          confirmButtonText: this.$t('home.confirm'),
          cancelButtonText: this.$t('home.cancel'),
        }).then(({ value }) => {
          get("https://course.acktechnologies.com.cn/api/card/addcategory", {
        token: this.$cookies.get("vtrstoken"),
        name:value,
        module:'card'
      })
          .then(res => {
            if (res.code === 1) {
              this.$message({
            type: 'success',
            message: res.msg
          });
          this.getOption();
            } else {
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          })
          .catch(error => {
            // error
            this.$message({
              message: error.msg,
              type: "warning"
            });
            console.log(error);
          });
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('home.msg14')
          });       
        });
    },
     getTypes(){
         get("https://course.acktechnologies.com.cn/api/card/types", {
             token: this.$cookies.get("vtrstoken"),
           module:'card'
         }).then(res => {
             if (res.code === 1) {
                 this.types = res.data;
             } else {
                 this.$message({
                     message: res.msg,
                     type: "warning"
                 });
             }
         })
             .catch(error => {
                 // error
                 this.$message({
                     message: error.msg,
                     type: "warning"
                 });
                 console.log(error);
             });
     },
    getOption(){
      get("https://course.acktechnologies.com.cn/api/card/categories", {
        token: this.$cookies.get("vtrstoken"),
        currentpage:1,
        pagesize:50
      }).then(res => {
            if (res.code === 1) {
              this.options = res.data.list;
            } else {
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          })
          .catch(error => {
            // error
            this.$message({
              message: error.msg,
              type: "warning"
            });
            console.log(error);
          });
    },
    remove() {
      this.coverImg = "";
    },
    prewHadler(obj) {
          console.log(obj);
      this.prewVisible = true;
      this.prevObj = obj;
    },
      importProject() {
        sessionStorage.setItem('cover', this.articleImg);
          if (this.type==="normal"||this.type==="text"){
              this.$router.push({path:'./article_editor',query: {id:this.type,temp:this.checkboxValue}})
          }else if (this.type==="video"){
              this.$router.push({path:'./video_editor',query: {id:this.type,temp:this.checkboxValue}})
          }else{
              this.$router.push({path:'./video_editor',query: {id:this.type,temp:this.checkboxValue}})
          }
      },
    btnPrev(){
      this.prewVisible = true;
    },
    loginoutHadle() {
      get("https://course.acktechnologies.com.cn/api/user/logout", {
        token: this.$cookies.get("vtrstoken")
      })
          .then(res => {
            if (res.code === 1) {
              this.$message({
                message: res.msg,
                type: "success"
              });
              this.$cookies.remove("vtrstoken");
              this.$router.push("./login");
            } else {
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          })
          .catch(error => {
            // error
            this.$message({
              message: error.msg,
              type: "warning"
            });
            console.log(error);
          });
    },
    copyUrl(data) {
      if (data) {
        let url = data;
        let oInput = document.createElement("input");
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value);
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: this.$t('home.msg1'),
          type: "success"
        });
        oInput.remove();
      } else {
        this.$message({
          message: this.$t('home.msg2'),
          type: "warning"
        });
      }
    },
    update() {
      if (!this.title && !this.desc && !this.coverImg) {
        this.$message({
          message: this.$t('home.msg3'),
          type: "warning"
        });
      } else {
        let param = new FormData();
        param.append("token", this.$cookies.get("vtrstoken"));
        param.append("id", this.prewGongchengId);
        param.append("name", this.title);
        param.append("description", this.desc);
        param.append("image", this.coverImg);
        post(
            "https://course.acktechnologies.com.cn/api/vtrsproject/update",
            param
        )
            .then(res => {
              if (res.code === 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.msg,
                  type: "warning"
                });
              }
            })
            .catch(error => {
              // error
              this.$message({
                message: error.msg,
                type: "warning"
              });
              console.log(error);
            });
      }
    },
    bianjiHadler(obj) {
        if (obj.kapian.type==="normal"||obj.kapian.type==="text"){
            this.$router.push({path:'./article_editor',query: {id:obj.kapian.type,editor:obj.id}})
        }else if (obj.kapian.type==="video"){
            this.$router.push({path:'./video_editor',query: {id:obj.kapian.type,editor:obj.id}})
        }else{
            this.$router.push({path:'./video_editor',query: {id:obj.kapian.type,editor:obj.id}})
        }
    },
    articleUploadOk(response){
      this.articleImg = response.data.url;
      this.editor(this.types.normal.id);
      this.$message({
        message: this.$t('home.msg4'),
        type: "success"
      });
    },
    textUploadOk(response){
      this.articleImg = response.data.url;
      this.editor(this.types.text.id);
      this.$message({
        message: this.$t('home.msg4'),
        type: "success"
      });
    },
    jumpText(){
      this.$router.push({path:'./article_editor',query: {id:this.types.text.id}})
    },
    videoUploadOk(response){
      this.articleImg = response.data.url;
      this.editor(this.types.video.id);
      this.$message({
        message: this.$t('home.msg4'),
        type: "success"
      });
    },
    audioUploadOk(response){
      this.articleImg = response.data.url;
      this.editor(this.types.audio.id);
      this.$message({
        message: this.$t('home.msg4'),
        type: "success"
      });
    },
    coverUploadOk(response) {
      this.coverImg = response.data.url;
      this.$message({
        message: this.$t('home.msg4'),
        type: "success"
      });
    },
    uploadOk() {
      this.$message({
        message: this.$t('home.msg4'),
        type: "success"
      });
      this.fileList = [];
    },
    uploadErro() {
      this.$confirm(this.$t('home.msg5'), "", {
        confirmButtonText: this.$t('home.confirm'),
        showCancelButton: false,
        confirmButtonClass: "sureBtn",
        type: "warning",
        center: true
      })
          .then(() => {})
          .catch(() => {});
      /*this.$message({
        message: "上传失败！",
        type: "warning"
      });*/
    },
    asyncImgChecked(file) {
      return new Promise(resolve => {
        const loading = this.$loading({
          lock: true,
          text: this.$t('home.msg6'),
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        let reader = new FileReader();
        reader.readAsDataURL(file.raw); // 必须用file.raw
        reader.onload = () => {
          // 让页面中的img标签的src指向读取的路径
          let img = new Image();
          img.src = reader.result;
          if (img.complete) {
            // 如果存在浏览器缓存中
            loading.close();
            if (img.width / img.height !== 2) {
              /*this.$message.warning(
                `图片比例2：1,当前文件${img.width}×${img.height}`
              );*/
              this.$alert(
                  `${this.$t('home.msg7')}${img.width}×${img.height}`,
                  this.$t('home.msg13'),
                  {
                    confirmButtonText: this.$t('home.confirm'),
                    customClass:"picTip"
                  }
              );
              resolve(false);
            } else {
              resolve(true);
            }
            if (file.status == "ready") {
              this.fileFlag = true;
            } else {
              this.fileFlag = false;
            }
          } else {
            img.onload = () => {
              loading.close();
              if (img.width / img.height !== 2) {
                /*this.$message.warning(
                  `图片比例2：1,当前文件${img.width}×${img.height}`
                );*/
                this.$alert(
                    `${this.$t('home.msg7')}${img.width}×${img.height}`,
                    this.$t('home.msg13'),
                    {
                      confirmButtonText: this.$t('home.confirm'),
                      customClass:"picTip"
                    }
                );
                resolve(false);
              } else {
                resolve(true);
                if (file.status == "ready") {
                  this.fileFlag = true;
                } else {
                  this.fileFlag = false;
                }
              }
            };
          }
        };
      });
    },
    fileChangesucai(file) {
      this.asyncImgChecked(file).then(data => {
        if (data) {
          this.$refs.upload.submit();
        } else {
          this.fileList = [];
        }
      });
    },
    fileChange(file) {
      if (file.status == "ready") {
        this.fileFlag = true;
      } else {
        this.fileFlag = false;
      }
    },
    circleChange(file) {
      if (file.status == "ready") {
        this.uploadFlag = true;
        this.creatShow = false;
      } else {
        this.uploadFlag = false;
      }
    },
    progress(event) {
      this.progressVal = parseInt(event.percent);
    },
    circleProgress(event){
      this.progressNum = parseInt(event.percent);
    },
    shareHadler(obj) {
      console.log(obj)
        this.share = "";
        this.dialogVisible = true;
        this.share = {
            share_url:obj.kapian.share_url,
            name:obj.title
        };
      if (obj.kapian.type==="normal"||obj.kapian.type==="text"){
        this.share.address = `https://www.acktec.cn/knowledgecard/index.html#/img_text?id=${obj.id}`;
      }else if (obj.kapian.type==="video"){
        this.share.address = `https://www.acktec.cn/knowledgecard/index.html#/player?id=${obj.id}`;
      }else{
        this.share.address = `https://www.acktec.cn/knowledgecard/index.html#/player?id=${obj.id}`
      }
    },
    deleteHadler(obj, index) {
      this.$confirm(this.$t('home.msg8'), this.$t('home.msg13'), {
        confirmButtonText: this.$t('home.confirm'),
        cancelButtonText: this.$t('home.cancel'),
        customClass:"deleteClass",
        type: 'warning'
      }).then(() => {
        get("https://course.acktechnologies.com.cn/api/card/del", {
          token: this.$cookies.get("vtrstoken"),
          id: obj.id
        })
            .then(res => {
              if (res.code === 1) {
                this.vtrsprojectList.splice(index, 1);
                this.$message({
                  message: res.msg,
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.msg,
                  type: "warning"
                });
              }
            })
            .catch(error => {
              // error
              this.$message({
                message: error.msg,
                type: "warning"
              });
              console.log(error);
            });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('home.msg9')
        });
      });

    },
    oprate(index) {
      this.vtrsprojectList[index].show = true;
    },
    oprateHide(index) {
      this.vtrsprojectList[index].show = false;
    },
    load() {
      get("https://course.acktechnologies.com.cn/api/card/templates", {
        token: this.$cookies.get("vtrstoken"),
        type:this.type,
        /*pege: this.materialPage,
        pagesize: 20*/
      })
          .then(res => {
            if (res.code === 1) {
              this.materialList = res.data;
            } else {
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          })
          .catch(error => {
            // error
            this.$message({
              message: error.msg,
              type: "warning"
            });
            console.log(error);
          });
    },
    check() {
      get("https://course.acktechnologies.com.cn/api/vtrsproject/check", {
        token: this.$cookies.get("vtrstoken"),
        type: "enname",
        value: this.enName
      })
          .then(res => {
            if (res.code !== 1) {
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          })
          .catch(error => {
            // error
            this.$message({
              message: error.msg,
              type: "warning"
            });
            console.log(error);
          });
    },
    vtrsproject() {
      if (this.$cookies.get("vtrstoken")) {
        get("https://course.acktechnologies.com.cn/api/card/list", {
          token: this.$cookies.get("vtrstoken"),
          page: this.vtrsprojectPage,
          keyword: this.search,
          cid:this.cid,
          pageSize: 20
        }).then(res => {
              if (res.code === 1) {
                this.vtrsprojectList = this.vtrsprojectList.concat(res.data.rows);
                this.vtrsprojectList.map(item => {
                  this.$set(item, "show", false);
                  this.$set(item, "coverShow", false);
                });
                if (this.vtrsprojectPage===0){
                  this.$nextTick(()=>{
                    this.$refs.list.scrollTop = 0;
                  })
                }
                this.vtrsprojectPage++;
              } else {
                this.$message({
                  message: res.msg,
                  type: "warning"
                });
              }
            })
            .catch(error => {
              // error
              this.$message({
                message: error.msg,
                type: "warning"
              });
              console.log(error);
            });
      } else {
        this.$router.push("./login");
      }
    }
  }
};
</script>
<style lang="less">
.el-radio-button__inner, .el-radio-group{
  display: block;
}
.typeSelect{
  width: 360px;
  margin: 20px auto;
  .item{
    width: 100%;
    height: 100px;
    background: #FFFFFF;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    padding-left: 72px;
    box-sizing: border-box;
    cursor: pointer;
    .icon{
      width: 48px;
      height: 48px;
      img{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .text{
      margin-left: 20px;
        h5{
          text-align: left;
          font-size: 16px;
          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
          font-weight: 500;
          color: #333333;
        }
        p{
          font-size: 12px;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          font-weight: 400;
          color: #666666;
          margin-top: 8px;
        }
      }
  }
  .item:hover{
    border: 2px solid #6EA9DE;
  }
}
.selectType{
  background: #F7F8F8!important;
  border-radius: 10px!important;
  overflow: hidden;
  .el-dialog__header{
    background-color: #FFFFFF;
  }
}
.el-message-box__status.el-icon-warning {
  color: #d71010;
}
.bottom .el-input__inner{
  font-size: 14px;
  height: 36px;
  line-height: 36px;
}
.bottom .el-input__icon{
  line-height: 36px;
}
.bottom .el-input__inner::placeholder {
  font-size: 14px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  font-weight: 400;
  color: #A0A0A0;
}
.bottom .el-input__icon{
  font-size: 20px;
}
.el-message-box__status {
  font-size: 50px !important;
}

.el-message-box__content {
  color: #d71010;
  font-size: 20px;
  margin: 10px auto 40px auto;
}

.sureBtn {
  width: 290px;
  height: 50px;
  background: #d45d5d !important;
  border-radius: 5px;
  border: 1px solid #ffffff;
  font-size: 22px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}

.sureBtn .el-message-box {
  width: 400px;
  height: 260px;
}
.picTip{
  height: 185px;
}
.prew .el-dialog__body {
  text-align: left;
  padding: 0;
  margin: 0;
  height: 736px !important;
  .title{
        font-size: 17px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        color: #333333;
        height: 24px;
        line-height: 24px;
        text-align: center;
    }
}
* {
  padding: 0;
  margin: 0;
}
.media{
    width: 100%;
    img{
        display: block;
        width: 100%;
        height: auto;
    }
  video{
    display: block;
    width: 100%;
  }
}
.el-radio__inner{
    border-radius: 0!important;
}
.infinite-list-item .el-radio__input.is-checked .el-radio__inner::after {
    transform: rotate(45deg) scaleY(1) !important;
}
.infinite-list-item .el-radio__inner::after {
    box-sizing: content-box;
    content: "";
    border: 1px solid #fff;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform .15s ease-in .05s;
    transform-origin: center;
    border-radius: 0;
    background-color: transparent;
}
</style>
<style scoped lang="less">
.progressConatiner{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.35);
}
.selectContainer{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  p{
    width: 75px;
    font-size: 16px;
    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    font-weight: 400;
    color: #333333;
  }
  .el-select{
    width: 150px;
  }
}
.coverImg {
  width: 148px;
  height: 148px;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.prew {
  iframe {
    width: 100%;
    height: 736px;

    body {
      padding: 0;
      margin: 0;
    }
  }
}

.prew /deep/ .el-dialog__body {
  padding: 0;
  margin: 0;
  height: 736px;
}

.copyBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  font-weight: 400;
  color: #7d7d7d;

  .linkContainer {
    width: 200px;
    overflow: auto;
  }

  .copy {
    width: 69px;
    height: 29px;
    line-height: 29px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #979797;
    cursor: pointer;
  }
}

.shareName {
  font-size: 24px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  font-weight: 400;
  color: #333333;
  margin-top: 30px;
  text-align: center;
}

.picLIst {
  width: 140px;
  height: 140px;
  background: #d8d8d8;
  border-radius: 6px;
  margin: 15px auto 0 auto;
  overflow: hidden;

  img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
  }
}

/deep/ .el-dialog__headerbtn {
  font-size: 32px;
}

/deep/ .yulan .el-dialog__headerbtn {
  left: 20px;
}

/deep/ .el-dialog__body {
  box-sizing: border-box;
}
/deep/ .el-select{
  width: 100%;
}
.yulan {
  position: relative;

  .txt {
    width: 190px;
    height: 60px;
    line-height: 60px;
    font-size: 26px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 3px;
    background: #63a0ff;
    border-radius: 4px;
    position: absolute;
    top: 11px;
    right: 27px;
    cursor: pointer;
  }

  height: 100%;

  #left,
  #right {
    width: 180px;
    height: 100%;
  }

  #left {
    float: left;
  }

  #right {
    float: right;
    .upload-cover {
      text-align: left;
      position: relative;
      .coverImg {
        position: absolute;
        top: 0;
        left: 0;
        .close {
          width: 20px;
          height: 20px;
          position: absolute;
          top: -10px;
          right: -10px;
          background: url("../assets/img/bg.png") no-repeat center center/100%;
          img {
            display: block;
            width: 10px;
            height: 10px;
            margin: 5px auto 0 auto;
          }
        }
      }
    }
    .saveBtn {
      width: 190px;
      height: 48px;
      line-height: 48px;
      background: #63a0ff;
      border-radius: 4px;
      margin: 100px auto 0 auto;
      font-size: 26px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #ffffff;
      letter-spacing: 3px;
      cursor: pointer;
    }
  }

  #center {
    width: calc(100% - 400px);
    margin: 0 auto;
    height: 100%;
  }

  .save {
    p {
      font-size: 24px;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
      color: #333333;
      margin: 27px 0;
      text-align: center;
    }

    .item {
      .title {
        font-size: 20px;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #333333;
        margin: 20px 0 13px 0;
        letter-spacing: 1px;
        text-align: left;
      }
    }
  }
}

/deep/ .el-dialog__body {
  height: calc(100% - 54px);
}

.yulancontent {
  width: 100%;
  height: 100%;

  iframe {
    width: 100%;
    height: 100%;
  }
}

.home {
  width: 100%;
  height: 100%;
  background: #f7f8f8;
}

/deep/ .el-radio__label {
  display: none;
}

.share {
  width: 368px;
  height: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../assets/img/border.png") no-repeat center center/100%;
  background-size: cover;
  margin: 0 auto;

  img {
    display: block;
    width: 336px;
    height: 336px;
  }
}

.el-container {
  height: 100%;

  .list {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .item {
      float: left;
      margin-right: 20px;
      margin-bottom: 10px;
    }
  }
}

.el-aside {
  height: 100%;
  background-color: #ffffff;

  li {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 36px;
    color: #000000;
    background: #f2f7ff;

    img {
      display: block;
      width: 18px;
      height: auto;
    }
  }

  .router-link-active {
    color: #136CE1;
  }

  a {
    font-size: 14px;
    margin-left: 12px;
  }
}

.el-header {
  display: flex;
  flex-direction: row;
  padding: 0;
  background-color: #ffffff;
}

.logo {
  width: 104px;
  height: 56px;
  position: relative;
  background-color: #131314;
  img {
    display: block;
    width: 104px;
    height: 37px;
    margin-top: 9px;
    margin-left: 49px;
  }
}

.search {
  flex-grow: 1;

  .top {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    background-color: #131314;
    .title {
      height: 56px;
      line-height: 56px;
      font-size: 18px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #FFFFFF;
      letter-spacing: 2px;
      text-align: center;
      flex-grow: 1;
    }

    .avatar {
      width: 36px;
      height: 36px;
      background: #f2f2f2;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      position: relative;
      margin-right: 23px;
      cursor: pointer;
      img {
        display: block;
        width: 24px;
        height: 24px;
      }
    }
    .nickname {
      width: 200px;
      height: 24px;
      font-size: 24px;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
      color: #333333;
      line-height: 24px;
      letter-spacing: 1px;
      position: absolute;
      bottom: -25px;
      right: 0px;
      z-index: 99;
      .loginout {
        width: 100%;
        font-size: 14px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;

        /*background: url("../assets/img/loginout.png") no-repeat center
          center/100%;*/
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.21);
        cursor: pointer;
        ul{
          margin-top: 10px;
        }
        li{
          width: 100%;
          height: 52px;
          color: #333333;
          background: #FFFFFF;
          text-align: center;
          overflow: hidden;
          p{
            width: 100%;
            height: 32px;
            line-height: 32px;
            margin: 10px 0;
          }
          p:hover{
            background: #EFF6FF;
          }
        }
        li:nth-child(1){
          border-bottom: 1px solid #EBEBEB;
        }
      }
    }
    .downIcon {
      width: 0;
      height: 0;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      border-top: 10px solid #d7d7d7;
      margin-left: 10px;
    }
  }

  .searchInput {
    width: 300px;
  }

  .bottom {
    width: 100%;
    height: 56px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-left: 12px;
    .optionContaier{
      width: 650px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .typeSelect {
      width: 300px;
      margin-right: 20px;
    }
    .searchInput {
      margin-right: 20px;

      input {
        width: 500px;
        height: 60px;
        padding-left: 17px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #d8d8d8;
      }

      input::-webkit-input-placeholder {
        font-size: 26px;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #a0a0a0;
      }

      input::-moz-placeholder {
        font-size: 26px;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #a0a0a0;
      }

      input:-ms-input-placeholder {
        font-size: 26px;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #a0a0a0;
      }
    }

    .el-button--primary {
      width: 176px;
      height: 32px;
      line-height: 32px;
      background-color: #63a0ff;
      border-color: #63a0ff;
      font-size: 14px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #ffffff;
      letter-spacing: 2px;
      padding: 0;
      margin-left: 12px;
    }
  }
}

.el-main {
  height: 100%;
  margin: 20px;
  box-sizing: border-box;
  padding: 0;
  .list {
    .item {
      width: 151px;
      height: 200px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      .pic {
        width: 152px;
        height: 160px;
        position: relative;
        .cover {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 160px;
          background: rgba(0, 0, 0, 0.45);
          border-radius: 4px 4px 0px 0px;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .edit {
            margin-top: 10px;
          }

          > div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 110px;
            height: 26px;
            border-radius: 4px;
            border: 1px solid #ffffff;
            margin-left: auto;
            margin-right: auto;

            img {
              display: block;
              width: 15px;
              height: auto;
            }

            span {
              font-size: 14px;
              font-family: SourceHanSansCN-Normal, SourceHanSansCN;
              font-weight: 400;
              color: #ffffff;
              margin-left: 10px;
            }
          }
        }

        .product {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 4px 4px 0px 0px;
        }

        .status {
          width: 47px;
          height: 49px;
          position: absolute;
          top: 0;
          right: 0;
          z-index: 99;

          img {
            display: block;
            width: 100%;
            height: auto;
          }
        }
      }

      .control {
        width: 100%;
        height: 40px;
        padding: 0 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        box-sizing: border-box;
        p {
          height: 40px;
          font-size: 14px;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          font-weight: 400;
          color: #333333;
          line-height: 40px;
          overflow: hidden;
        }

        .iconContainer {
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .more {
            width: 16px;
            height: 16px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            img {
              display: block;
              width: 16px;
              height: auto;
            }
          }

          .operate {
            width: 65px;
            background: #ffffff;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
            padding: 0 9px;
            position: absolute;
            bottom: 35px;
            left: -26px;
            border-radius: 4px;
            box-sizing: border-box;
            cursor: pointer;
            li {
              height: 25px;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              img {
                display: block;
                width: 14px;
                height: 14px;
                margin-right: 5px;
              }
              span {
                font-size: 12px;
                font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                font-weight: 400;
                color: #333333;
              }
            }
          }
        }
      }
    }
  }
}
/deep/ .typeSelect .item .el-upload{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.creatBox {
  width: 880px;
  height: 500px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  z-index: 100;

  .title {
    height: 26px;
    font-size: 26px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #333333;
    line-height: 26px;
    margin-top: 60px;
    margin-bottom: 33px;
    text-align: center;
  }

  .item {
    width: 600px;
    margin: 20px auto 0 auto;

    input {
      width: 600px;
      height: 80px;
      font-size: 26px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #b2b2b2;
      padding-left: 22px;
    }

    input::-webkit-input-placeholder {
      font-size: 26px;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
      color: #b8b8b8;
    }

    input::-moz-placeholder {
      font-size: 26px;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
      color: #b8b8b8;
    }

    input:-ms-input-placeholder {
      font-size: 26px;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
      color: #b8b8b8;
    }

    p {
      font-size: 20px;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
      color: #8d8d8d;
      line-height: 30px;
      text-align: left;
    }
  }

  .btnContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 68px;

    div {
      width: 50%;
      height: 60px;
      line-height: 60px;
      font-size: 30px;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
      letter-spacing: 1px;
      cursor: pointer;
    }

    .cancel {
      color: #666666;
    }

    .sure {
      color: #2f7de4;
      border-left: 1px solid #d3d3d3;
    }
  }
}

.materialBox {
  width: 900px;
  height: 600px;
  background: #f7f8f8;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;

  .close {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 19px;
    right: 31px;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .title {
    font-size: 18px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #333333;
    height: 60px;
    line-height: 60px;
    background: #ffffff;
    border-radius: 20px 20px 0px 0px;
  }

  .control {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;

    .sucai {
      width: 400px;
      margin-right: 12px;
    }
  }

  .infinite-list {
    width: 100%;
    height: 480px;
    padding: 20px 20px 70px 22px;
    box-sizing: border-box;
  }

  .infinite-list-item {
    width: 190px;
    height: 235px;
    background: #ffffff;
    border-radius: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    position: relative;
    float: left;

    img {
      display: block;
      width: 100%;
      height: 200px;
      background: rgba(0, 0, 0, 0.39);
      border-radius: 10px 10px 0px 0px;
    }

    .name {
      width: 100%;
      height: 35px;
      line-height: 35px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
      color: #333333;
    }

    .el-radio {
      position: absolute;
      top: 20px;
      left: 15px;
      z-index: 10;
      border-radius: 4px;
    }
  }

  .bottomContro {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    background: #ffffff;
    border-radius: 0px 0px 20px 20px;
    padding: 10px 40px 0 0;
    box-sizing: border-box;
    text-align: right;
  }
}
</style>
